<template>
  <div class="custom_swipetabs">
    <div class="custom_swipetabs_content">
      <div class="custom_swipetabs_content_item">
        <div class="custom_swipetabs_content_item_tabbar">
          <div class="custom_swipetabs_content_item_tabbar_content">
            <div
              class="custom_swipetabs_content_item_tabbar_item"
              v-for="(tab, index) in item.data"
              :key="'swipetabs_bar_' + index"
              :class="currentIndex === index && 'on'"
              :style="{ width: 100 / item.data.length + '%' }"
              @click="swipeTabClickHandle(index)"
            >
              <slot name="tabItem" :item="{ tab, index }"></slot>
            </div>
          </div>
        </div>
        <div class="custom_swipetabs_content_item_tabpanel">
          <Swipe
            :item="
              $Plugins.extend(
                {},
                {
                  vertical: false,
                  height: '100%',
                  showBackground: false,
                  speed: 0,
                  showDock: false,
                  isTask: true,
                  defaultIndex: currentIndex,
                  ref: item.ref,
                  data: item.data,
                }
              )
            "
          >
            <template v-slot:swipeItem="{ swipeItem, item, index }">
              <slot
                name="tabPanel"
                :item="item"
                :swipeItem="swipeItem"
                :index="index"
              ></slot>
            </template>
          </Swipe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "swipeTabs",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Swipe: () =>
      import(/* webpackChunkName:'swipe' */ "../../components/swipe/swipe"),
    Groups: () =>
      import(/* webpackChunkName:'groups' */ "../../components/groups/groups"),
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  created() {
    this.$on("changeHandle", this.swipeTabChange);
  },
  watch: {
    currentIndex(v) {
      console.log(v);
    },
  },
  methods: {
    swipeTabClickHandle(index) {
      this.currentIndex = index;
    },
    swipeTabChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_swipetabs {
  .custom_swipetabs_content {
    .custom_swipetabs_content_item {
      .custom_swipetabs_content_item_tabbar {
        background-color: #fff;
        padding: (5 / @base) (10 / @base);
        .custom_swipetabs_content_item_tabbar_content {
          display: flex;
          .custom_swipetabs_content_item_tabbar_item {
            &.on {
              background-color: #efefef;
              border-radius: (5 / @base);
            }
          }
        }
      }
      .custom_swipetabs_content_item_tabpanel {
        .custom_swipetabs_content_item_tabpanel_item {
        }
      }
    }
  }
}
</style>
